<template>
  <div class="side-bar">
    <div class="user-icon">
      <img src="../assets/img/icon.svg" />
    </div>
    <div title="聊天" class="side-btn my-chat" :class="tabIndex === 0 ? 'tab-this' : 'tab-other'" @click="_btnTab(0)">
      <Icon type="ios-text" />
    </div>
    <div title="用户" class="side-btn my-address" :class="tabIndex === 1 ? 'tab-this' : 'tab-other'" @click="_btnTab(1)">
      <Icon type="md-person" />
    </div>
    <!-- <div title="通讯录" class="side-btn my-address" :class="tabIndex === 1 ? 'tab-this' : 'tab-other'" @click="_btnTab(2)">
      <i class="el-icon-postcard"></i>
    </div> -->
    <!-- <div title="文件夹" class="side-btn my-file" :class="tabIndex === 2 ? 'tab-this' : 'tab-other'" @click="_btnTab(3)">
      <i class="el-icon-document"></i>
    </div> -->
    <!-- <div title="设置" class="side-btn my-setting" :class="tabIndex === 3 ? 'tab-this' : 'tab-other'" @click="_btnTab(4)">
      <i class="el-icon-setting"></i>
    </div> -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      tabIndex: 0
    }
  },
  methods: {
    _btnTab: function(index) {
      if (this.tabIndex === index) {
        return
      }
      this.tabIndex = index
      // 注册点击事件
      this.$emit('tabClick', index)
    }
  }
}
</script>

<style scoped>
.side-bar {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 60px;
  background-color: #17233d;
  -webkit-app-region: drag;
  -webkit-user-select: none;
}

.user-icon {
  position: absolute;
  top: 20px;
  left: 10px;
  right: 10px;
  height: 40px;
  -webkit-app-region: no-drag;
}

.user-icon img {
  height: 100%;
  width: 100%;
}

.side-btn {
  height: 30px;
  width: 30px;
  text-align: center;
  line-height: 30px;
  font-size: 28px;
  -webkit-app-region: no-drag;
  cursor: pointer;
}

.tab-other {
  color: #dcdfe6;
}

.tab-this {
  color: #19be6b;
}

.tab-other:hover {
  color: #f2f6fc;
}

.my-chat {
  position: absolute;
  top: 100px;
  left: 15px;
}

.my-address {
  position: absolute;
  top: 160px;
  left: 15px;
}

.my-file {
  position: absolute;
  top: 220px;
  left: 15px;
}

.my-setting {
  position: absolute;
  bottom: 20px;
  left: 15px;
}
</style>
